<template>
  <div class="home">
    <el-container>
      <el-header class="el-header">
        <img
          src="@/assets/logo.jpg"
          style="width: 200px; height: 60px"
          alt=""
        />
        <div>ERP管理系统</div>
        <div>
          <span>欢迎你，{{ token.username }}</span>
          &nbsp;&nbsp;
          <el-dropdown style="margin-top: -20px">
            <el-avatar :size="50" src="https://joesch.moe/api/v1/random" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @Click="exit"> 退出 </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div>
            {{ wea?.area_2 }}&nbsp;&nbsp;{{ wea?.realTime?.wtNm }}&nbsp;&nbsp;{{
              wea?.realTime?.wtTemp
            }}℃&nbsp;&nbsp;{{ time }}
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="el-aside">
          <el-menu
            :default-active="defaultActive"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
            router
          >
            <!-- router 开启路由模式， -->
            <el-menu-item
              :index="i.title"
              v-for="i in token.result"
              :key="i.id"
            >
              <el-icon><icon-menu /></el-icon>
              <template #title>{{ i.titleName }}</template>
            </el-menu-item>
          </el-menu>
          <el-radio-group v-model="isCollapse" class="isCollapse">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
        </el-aside>
        <el-container>
          <el-main class="el-main"><router-view /></el-main>
          <el-footer class="el-footer"
            >关于百度About
            Baidu使用百度前必读帮助中心企业推广京公网安备11000002000001号京ICP证030173号信息网络传播视听节目许可证
            0110516互联网宗教信息服务许可证编号：京（2022）0000043</el-footer
          >
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  reactive,
  toRefs,
  markRaw,
  watch,
  onBeforeUnmount,
  onBeforeUpdate,
} from "vue";
import { useRouter } from "vue-router";
import { getToken, removeToken } from "@/utils/localStorage";
import { weather } from "@/request/api";
import { formatDate } from "@/utils/timer";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

interface Idata {
  [propName: string]: any; //propName为形参
}
interface Iperson {
  wea: Idata;
}
export default defineComponent({
  name: "HomeView",
  setup() {
    const router = useRouter();
    const token = getToken();
    const person: Iperson = reactive({
      wea: {},
    });
    const defaultActive = ref("");

    let time = ref(formatDate(new Date().getTime()));
    let timer: any;

    const exit = () => {
      router.replace("/login");
      removeToken();
    };
    const isCollapse = ref(false);
    // 展开事件
    const handleOpen = (key: string, keyPath: string[]) => {
      // console.log(key, keyPath);
    };
    // 收起事件
    const handleClose = (key: string, keyPath: string[]) => {
      // console.log(key, keyPath);
    };
    // 切换事件
    const handleSelect = (key: string, keyPath: string[]) => {
      // console.log(key, keyPath);
    };

    watch(
      time,
      () => {
        timer = setInterval(() => {
          time.value = formatDate(new Date().getTime());
        }, 1000);
      },
      { immediate: true }
    );

    onBeforeUpdate(() => {
      /* 子级路由切换触发 */
      defaultActive.value = router.currentRoute.value.name as string;
    }),
      onMounted(async () => {
        // 获取所有路由信息
        // console.log(router.getRoutes());
        // console.log("router", router.currentRoute.value);

        defaultActive.value = router.currentRoute.value.name as string;

        const { data } = await weather();
        person.wea = markRaw(data.result);
      });
    onBeforeUnmount(() => {
      clearInterval(timer);
    });
    return {
      exit,
      token,
      isCollapse,
      handleOpen,
      handleClose,
      handleSelect,
      ...toRefs(person),
      time,
      router,
      defaultActive,
    };
  },
  components: { IconMenu },
});
</script>
<style lang="scss" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #c6e2ff;
  height: 100px;
}
.el-aside {
  height: calc(100vh - 100px);
  background: #d9ecff;
  .el-menu {
    // border: none;
    background: #d9ecff;
  }
  .isCollapse {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.el-main {
  background: #ecf5ff;
}
.el-footer {
  background: #c6e2ff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
